<template>
  <div id="app">
    <div id="globaltrend" style="width: 900px;height:500px;margin:30px 300px"></div>
  </div>
</template>
<script>
import axios from 'axios'
import echarts from "echarts"
import XLSX from 'xlsx'
import "echarts/map/js/china.js"
import transformSheets from '../scripts/read_xlsx.js'
export default {
  name: "app",
  data(){
      return{
        city:[],
        confirmed:[],
        date:[],
        options: [],
        value: ''
      };
  },
  methods: {
    drawChart() {
       this.chartLine = echarts.init(document.getElementById('globaltrend'));
 
        // 指定图表的配置项和数据
        var option = {
          
            tooltip: {              //设置tip提示
                trigger: 'axis'
            },
            legend: {               //设置区分（哪条线属于什么）
                data:['全球累计确诊人数']
            },
            color: ['#1f307b', '#1f307b'],       //设置区分（每条线是什么颜色，和 legend 一一对应）
            xAxis: {                //设置x轴
                type: 'category',
                boundaryGap: false,     //坐标轴两边不留白
                data: this.date,
                // name: 'DATE',           //X轴 name
                nameTextStyle: {        //坐标轴名称的文字样式
                    color: '#1f307b',
                    fontSize: 16,
                    padding: [0, 0, 0, 20]
                }
                // axisLine: {             //坐标轴轴线相关设置。
                //     lineStyle: {
                //         color: '#000000',
                //     }
                // }
            },
            yAxis: {
                // name: '省份累计确诊人数',
                nameTextStyle: {
                    color: '#000000',
                    fontSize: 16,
                    padding: [0, 0, 10, 0]
                },
                // axisLine: {
                //     lineStyle: {
                //         color: '#000000',
                //     }
                // },
                type: 'value'
            },
            dataZoom: [
        {
          startValue: '20-1-22'
        },
        {
          type: 'inside'
        }
      ],
            series: [
              {
                name: '全球累计确诊人数',
                data: this.confirmed,
                type: 'line',
                lineStyle: {
                    normal: {
                        color: '#1f307b',
                    }
                },
              }
          ]
        };

        // 使用刚指定的配置项和数据显示图表。
        this.chartLine.setOption(option);
    },
    getData(){
      axios.get('../../static/data/global_trend.csv',{responseType:'arraybuffer'})
      .then(res => {
        var data = new Uint8Array(res.data) 
        var wb = XLSX.read(data,{type:"array"})
        var sheet1 = wb.Sheets
        // console.log(sheet1)
        var content = transformSheets(sheet1)
        delete content[0]
        console.log(content)
        this.confirmed = content[1]
        this.date = content[2]
        this.drawChart()
      }).catch(err =>{
        console.log(err)
      })
    }
  },
  mounted() {
    this.getData()
  }
};
</script>
<style>
</style>